<template>
    <!-- 弹出层 -->
    <a-modal title="新增管理员" @cancel="btnCancel" @ok="btnOk" v-model:visible="showDialogComputed">
        <!-- labelCol定义 表单中左侧标题的一个宽度 -->
        <a-form :labelCol="{ span: 4 }">
            <a-form-item label="账号" name="account" v-bind="form.validateInfos.account">
                <a-input v-model:value="formData.account" placeholder="请输入账号"></a-input>
            </a-form-item>
            <a-form-item label="密码" name="passwor" v-bind="form.validateInfos.password">
                <a-input v-model:value="formData.password" placeholder="请输入密码" type="password"></a-input>
            </a-form-item>
            <a-form-item label="角色" name="role" v-bind="form.validateInfos.role">
                <a-input v-model:value="formData.role" placeholder="请输入角色"></a-input>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup lang="ts">
import { Form, message } from 'ant-design-vue'

// 父子组件通信 父：v-model:showDialog="showDialog"
// 子： emits('update:showDialog','传给父组件的值')

// Props是单向数据流只能在父组件修改，不能在子组件修改
const { showDialog } = defineProps({
    showDialog: Boolean
})

// 得到一个事件触发器
const emits = defineEmits<{
    (e: 'update:showDialog', val: Boolean): void,
    (e: 'addSuccess'): void,
}>()
// const emits = defineEmits(['update:showDialog'])

const initValues = {
    account: '',
    password: '',
    role: '',
    avatar: 'https://www.com8.cn/wp-content/uploads/2020/09/20200916082142-5f61cb1638f6e.jpg'
}
const formData = ref(initValues) // 声明一个响应式数据

const showDialogComputed = computed({
    get() {
        return showDialog  // 读取Props传来的值
    },
    set(val) {
        // val 是需要从父组件去入手修改 子传父
        emits('update:showDialog', val) // 告诉父组件 去修改showDialog的值
    }
})

const btnCancel = () => {
    form.resetFields() // 清除数据 并且清除校验
}

const btnOk = async () => {
    await form.validate()
    // 到此不证明校验通过
    const res = await addAdmin(formData.value)
    // 校验通知
    res.code === 201 ? message.success('新增管理员成功') : message.error('新增管理员失败'),

        btnCancel(),

        // 关闭弹层
        showDialogComputed.value = false

    // 新增成功 只是后端接口插入了一条数据- 前端并没有更新- 重新拉取数据
    // 告诉父组件
    emits('addSuccess')
}

// 校验规则
const rules = reactive({
    account: [
        { required: true, message: '账号不能为空', trigger: 'blur' },
        { min: 4, max: 10, message: '账号4-10位' }
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
    ],
    role: [{ required: true, message: '角色不能为空', trigger: 'blur' }],
})

// 引入antd的From下的useForm方法把校验规则绑定在formData.value上
const form = Form.useForm(formData.value, rules)


</script>